<template>
  <div>
    <basic-layout :title="title" :showAddBtn="false">
      <div class="detailCon">
        <div class="basicBox">
          <div class="top">
            <div class="tit">
              <b>
                {{ dataInfo.DANH }}

              </b>
            </div>
            <div class="row">
              <b>
                {{ dataInfo.DISGS }}
              </b>
            </div>
            <div class="Xunshi">
              <span v-if="dataInfo.SHENQZT == '06'" style="color: red">已领用</span>
              <span class="imgStyle" v-else style="color: #aaaaaa">未领用</span>
            </div>
          </div>

          <div class="middle">
            <p>
              <label>申请时间：</label>
              <span>{{ dataInfo.SHENQSJ }}</span>
            </p>
            <p>
              <label>申请人：</label>
              <span>{{ dataInfo.SQRNAME }}</span>
            </p>
            <p>
              <label>申批人：</label>
              <span>{{ dataInfo.SPRNAME }}</span>
            </p>
            <p>
              <label>领用人：</label>
              <span>{{ dataInfo.SSRYNAME }}</span>
            </p>
            <p>
              <label>发放/总数：</label>
              <span>{{ dataInfo.YFSL }}/{{ dataInfo.ZONGS }}</span>
            </p>
          </div>
          <div class="bottom">
          </div>
        </div>
        <div class="followerBox">
          <h5 @click="isFold2 = !isFold2">
            <b>已发放设备（{{ dataListPopup.length }}个）</b>
            <p v-if="isFold2">
              <van-icon name="arrow-down"/>
            </p>
            <p v-else>
              <van-icon name="arrow-up"/>
            </p>
          </h5>
          <div v-show="!isFold2" class="list">
            <div v-for="(val, ind) in dataListPopup" :key="ind" class="list-item">
              <div class="right">
                <div>
                  <label>实物编码：</label>
                  <p>{{ val.swid }}</p>
                </div>
                <div>
                  <label>品名：</label>
                  <p>{{ val.pinm }}</p>
                </div>
                <div>
                  <label>领用时间：</label>
                  <p>{{ val.rukrq }}</p>
                </div>
                <div>
                  <label>型号：</label>
                  <p>{{ val.xingh }}</p>
                </div>
                <div>
                  <label>单价：</label>
                  <p>{{ val.danj }}(元)</p>
                </div>
              </div>
            </div>
            <van-empty v-if="!dataList.length" class="custom-image" :image="require('../../../assets/images/empty.png')"
                       description="暂无审核记录信息"/>
          </div>
        </div>
      </div>
    </basic-layout>
  </div>
</template>
<script>
import { queryFfsb, queryYffsb } from '@/api/srvAssurance/assetLabel/assetLabel'

export default {
  components: {},
  data () {
    return {
      title: '物资发放',
      dataInfo: {},
      dataList: [],
      activeNames: [],
      dataListPopup: [],
      isFold2: false,
      loading: false,
      finished: false,
      refreshing: false,
      queryParam: {
        releasePlanId: '',
        type: '',
        pageIndex: 1,
        pageSize: 10,
      },
      queryParamPopup: {
        releasePlanId: '',
        type: '',
        pageIndex: 1,
        pageSize: 10,
      },
      shenqzt: null,
    }
  },

  created () {
    let dataInfo = this.$route.query.dataInfo
    if (JSON.stringify(dataInfo) != '"[object Object]"') {
      this.queryParam.releasePlanId = dataInfo.releasePlanId || ''
      this.queryParam.type = dataInfo.type || ''
      this.queryParam.releasePlanId = dataInfo.ID || ''
      this.shenqzt = dataInfo.SHENQZT || null
      sessionStorage.setItem('distributionList-dataInfo', JSON.stringify(dataInfo))
    } else {
      var item = sessionStorage.getItem('distributionList-dataInfo')
      var dataParse = JSON.parse(item)
      this.queryParam.releasePlanId = dataParse.releasePlanId || ''
      this.queryParam.type = dataParse.type || ''
      this.queryParam.releasePlanId = dataParse.ID || ''
      this.queryParam.xiaol = dataInfo.xiaolid || ''
      this.queryParam.keyword = dataInfo.pinm || null
    }
    this.queryParamPopup.type = this.queryParam.type || ''
    this.queryParamPopup.releasePlanId = this.queryParam.releasePlanId || ''
    this.dataInfo = dataInfo
    this.initData()
    this.initPopup()

  },

  methods: {
    onRefresh () {
      this.initData()
      this.initPopup()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },
    async initPopup () {
      this.queryParamPopup.pageIndex = 1
      this.queryParamPopup.releasePlanId = this.dataInfo.ID
      // this.queryParamPopup.type=this.queryParam.type

      this.finishedPopup = false
      this.refreshingPopup = true
      await this.getDataListPopup()
      this.refreshingPopup = false
    },

    async getDataListPopup () {
      this.loadingPopup = true
      let res = await queryYffsb(this.queryParamPopup)
      console.log(55555, this.queryParamPopup)
      if (res.status == 0) {
        if (this.queryParamPopup.pageIndex == 1) {
          // 清空列表数据
          this.dataListPopup = []
        }
        this.dataListPopup = this.dataListPopup.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataListPopup.length >= res.totalCount) {
          this.finishedPopup = true
        }
      }
      this.loadingPopup = false

    },
    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      let res = await queryFfsb(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    jumpTodistributionSearch (item) {
      this.$router.push({
        path: '/materialDistribution/distributionSearch',
        query: {
          dataInfo: item,
          param: this.queryParam
        }
      })
    },

    goBack () {
      this.$router.back()
    },

  }
}
</script>

<style scoped lang="less">
.detailCon {
  padding: 12px;
  height: 100%;
  background-color: #8080803b;

}


.basicBox {
  padding: 15px 10px 0px;
  box-sizing: border-box;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  position: relative;

  .downOtherProcess {
    width: 80%;
    float: left;
  }

  /deep/ .van-progress__pivot {
    display: none;
  }

  /deep/ .van-progress {
    height: 11px;
    margin-top: 4px;
  }

  .top {
    border-bottom: 1px dashed #aaa;
    padding: 0 5px 10px;
    margin-bottom: 12px;
    position: relative;
    line-height: 22px;


    .tit {
      b {
        font-size: 16px;

        span {
          font-size: 14px;
        }
      }

      .type {
        background: #f2a84e;
        font-size: 9px;
        color: #fff;
        margin-left: 8px;
        padding: 2px 3px;
        border-radius: 3px;
      }
    }

    .row {
      color: #999;
      font-size: 13px;
    }

    .qrcode {
      position: absolute;
      top: 0;
      right: 0;

      img {
        width: 35px;
        height: 35px;
        margin-right: 10px;
      }
    }

    .Xunshi {
      position: absolute;
      top: 0.00667rem;
      right: 0.68rem;
      font-size: 15px;
      margin-left: 78%;
    }
  }


  .middle {
    padding: 0 5px 5px;
    box-sizing: border-box;
  }

  p {
    display: flex;
    line-height: 28px;

    label {
      width: 75px;
      color: #999;
    }

    span {
      color: #333;
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .bottom {
    padding: 0 5px;
    box-sizing: border-box;
    margin-top: 10px;

    p span,
    p label {
      color: #999;
    }
  }
}

/deep/ .van-dialog {
  height: 70%;
}

/deep/ .van-dialog__content {
  overflow-y: scroll;
  height: 85%;
}

/deep/ .van-collapse-item__content {
  padding: 0px;
  background-color: aaa;
}

/deep/ .van-cell {
  border-radius: 10px;
}

/deep/ .van-cell__title {
  font-weight: bold;
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h5 {
  border-bottom: 1px solid #f1f1f2;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  font-weight: normal;
  position: relative;

  b {
    font-size: 14px;
  }

  p {
    font-weight: normal;
    position: absolute;
    color: #888;
    right: 15px;
  }
}

.followerBox {
  background: #fff;
  border-radius: 8px;
  margin-top: 12px;


  /deep/ .van-empty {
    padding: 20px 0;

    .van-empty__image {
      width: 50px;
      height: 50px;
    }
  }

  h5 {
    border-bottom: 1px solid #f1f1f2;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-weight: normal;
    position: relative;

    b {
      font-size: 14px;
    }

    p {
      font-weight: normal;
      position: absolute;
      color: #888;
      right: 15px;
    }
  }

  .dataStyle {
    padding: 0.1rem 0.26667rem 6px;
    position: relative;
    line-height: 25px;
    border-bottom: 0.02667rem dashed #aaa;

    .imgMain {
      position: absolute;
      right: 15px;
      top: 35px;

      .btn {
        right: 10px;
        bottom: 25px;

        .van-button {
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          border-radius: 17px;
          font-size: 13px;
        }
      }

      .btn1 {
        right: 10px;
        bottom: 25px;

        .van-button {
          padding: 0 10px;
          height: 30px;
          line-height: 30px;
          border-radius: 17px;
          font-size: 13px;
        }
      }
    }
  }

  .list-item {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    align-items: center;
    border-bottom: 0.02667rem dashed #aaa;

    img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }

    .right {
      flex: 1;
      overflow: hidden;

      div {
        display: flex;
        line-height: 28px;

        label {
          width: 75px;
          color: #999;
        }

        p {
          color: #333;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
